﻿<template>
    <div class="hidden h100 flex-column">
        <div class="flex-row padding-tb-8">
            <div class="flex-row-fill margin-left-10">
                <el-button type="primary" v-on:click="openEdit(0)" icon="el-icon-plus" plain size="small" v-if="fn.edit">新增</el-button>
            </div>
            <el-pagination background v-on:size-change="pagerSizeChange" v-on:current-change="pagerIndexChange"
                           :current-page="query.pageIndex" :page-sizes="[20,30,50,100]" :page-size="query.pageSize"
                           layout="prev, pager, next, total, jumper, sizes" :total="query.rowCount" :small="true"></el-pagination>
        </div>
        <div class="flex-column-fill hidden">
            <vxe-table :data="list" ref="vxeTable" stripe border style="width:100%;" height="100%" size="small" auto-resize :row-config="{isCurrent: true, isHover: true}" :column-config="{minWidth:'60px'}" show-header-overflow :row-class-name="tableRowClassName">
                <vxe-column field="title" title="标题" width="100" align="center">
                    <template #default="scope">
                        <span>{{scope.row.title}}</span>
                    </template>
                </vxe-column>
                <vxe-column field="title" title="内容" min-width="380" align="center">
                    <template #default="scope">
                            <div>{{scope.row.msg}}</div>
                                <el-link type="primary" v-on:click="toShare(scope.row.msg_key)">{{scope.row.msg_key}}</el-link>
                    </template>
                </vxe-column>
                <vxe-column field="title" title="开始时间" width="150" align="center">
                    <template #default="scope">
                        <span>{{scope.row.beginTime}}</span>
                    </template>
                </vxe-column>
                <vxe-column field="title" title="结束时间" width="150" align="center">
                    <template #default="scope">
                        <span>{{scope.row.endTime}}</span>
                    </template>
                </vxe-column>
                <vxe-column field="title" title="开启滚动" width="100" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.scrollable" disabled
                                   :inactive-value="0"
                                   :active-value="1">
                        </el-switch>
                    </template>
                </vxe-column>
                <vxe-column field="speed" title="滚动速率 (px/s)" width="100" align="center"></vxe-column>
                <vxe-column field="title" title="显示关闭" width="100" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.closeable" disabled
                                   :inactive-value="0"
                                   :active-value="1">
                        </el-switch>
                    </template>
                </vxe-column>
                <vxe-column field="title" title="发表人" width="150" align="center">
                    <template #default="scope">
                        <span>{{scope.row.openId}}</span>
                    </template>
                </vxe-column>
                <vxe-column field="title" title="发表时间" width="150" align="center">
                    <template #default="scope">
                        <span>{{scope.row.time}}</span>
                    </template>
                </vxe-column>
                <vxe-column title="操作" width="220" align="center">
                    <template #default="scope">
                        <el-button type="warning" icon="el-icon-edit" v-on:click="openEdit(1,scope)" size="mini" plain v-if="fn.edit">修改</el-button>
                        <el-button type="danger" icon="el-icon-delete" v-on:click="openEdit(2,scope)" size="mini" plain v-if="fn.edit">删除</el-button>
                    </template>
                </vxe-column>
                <vxe-column>
                </vxe-column>
            </vxe-table>
        </div>
        <el-drawer custom-class="el-drawer-fix" size="600px" :visible.sync="detail.show"
                   :destroy-on-close="true" :close-on-press-escape="false" :wrapper-closable="false">
            <div slot="title">
                {{detail.obj.optType==0?'添加':'修改'}}公告
            </div>
            <div class="flex-column hidden" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <div class="flex-column-fill margin-8 hidden-x" style="padding-right:20px;">
                    <el-form size="medium" :model="detail.obj" ref="form" :rules="rules">

                        <el-form-item label="标题" required>
                            <el-input v-model="detail.obj.title" clearable placeholder="请输入标题">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="关联文章链接" required>
                            <el-input v-model="detail.obj.editorId" clearable placeholder="请输入关联文章链接">
                            </el-input>
                            @*<el-select v-model="detail.obj.editorId" placeholder="请选择关联文章" v-on:visible-change="loadeditor">
                <el-option v-for="item in editor.list"
                           :key="item.id"
                           :label="item.title"
                           :value="item.id">
                </el-option>
            </el-select>*@
                        </el-form-item>
                        <el-form-item label="开始时间" prop="beginTime" required>
                            <el-date-picker v-model="detail.obj.beginTime" style="width:100%"
                                            type="datetime"
                                            placeholder="选择开始时间"
                                            align="right"
                                            :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" editable :clearable="false">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间" prop="endTime" required>
                            <el-date-picker v-model="detail.obj.endTime" style="width:100%"
                                            type="datetime"
                                            placeholder="选择结束时间"
                                            align="right"
                                            :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" editable :clearable="false">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="内容" prop="msg" required>
                            <el-input v-model="detail.obj.msg" type="textarea" :autosize="{ minRows: 4, maxRows: 6}"
                                      clearable placeholder="请输入内容" :disabled="!fn.edit"></el-input>
                        </el-form-item>
                        <el-form-item label="开启滚动" required>
                            <el-switch v-model="detail.obj.scrollable"
                                       :inactive-value="0"
                                       :active-value="1">
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="滚动速率 (px/s)" required label-width="117px">
                                <el-slider v-model="detail.obj.speed"></el-slider>
                        </el-form-item>
                        <el-form-item label="显示关闭" required>
                            <el-switch v-model="detail.obj.closeable"
                                       :inactive-value="0"
                                       :active-value="1">
                            </el-switch>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="padding-10 border-top-solid border-greyLight">
                    <el-button-group>
                        <el-button type="info" plain v-on:click="detail.show=false" icon="fa fa-rotate-left" size="small">
                            取消
                        </el-button>
                        <el-button type="primary" icon="fa fa-check" v-on:click="submit" size="small">确 定</el-button>
                    </el-button-group>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'notice',
            props: {

            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    query: {
                        pageIndex: 1,
                        pageSize: 20,
                        rowCount: 0,
                    },
                    fn: {
                        edit: optor.canDo(30801)
                    },
                    detail: {
                        show: false, obj: {
                            optType: 0,
                            title: '',
                            msg: '',
                            beginTime: '',
                            endTime: '',
                            editorId:'',
                            openId: optor.openId,
                            scrollable: 0,
                            speed: 60,
                            closeable:0,
                        }
                    },
                    list: [],
                    editor: { list: [], load: false },
                    rules: {
                        title: [{
                            required: true,
                            message: '请输入标题',
                            trigger: 'change'
                        }],
                        msg: [{
                            required: true,
                            message: '请输入内容',
                            trigger: 'change'
                        }],
                        editorId: [{
                            required: true,
                            message: '请输入关联文章链接',
                            trigger: 'change'
                        }],
                        beginTime: [{
                            required: true,
                            message: '请选择开始时间',
                            trigger: 'change'
                        }],
                        endTime: [{
                            required: true,
                            message: '请选择结束时间',
                            trigger: 'change'
                        }]
                    },
                    pickerOptions: {
                        shortcuts: [{
                            text: '今天',
                            onClick: function (picker) {
                                picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '昨天',
                            onClick: function (picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        }, {
                            text: '一周前',
                            onClick: function (picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }]
                    },
                }
            },
            computed: {

            },
            watch: {

            },
            activated: function () {
            },
            mounted: function () {
                var _this = this;
                _this.loadList();
            },
            methods: {
                tableRowClassName(d) {
                    if (d.row.status == 0) return 'bg-greenLight';
                    else if (d.row.status == 2) return 'bg-yellowLight';
                    return '';
                },
                loadList: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/noticeList',
                        data: _this.query,
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('查询失败：' + res.errmsg);
                            _this.list = res.data.list;
                            _this.query.pageIndex = res.data.pageIndex;
                            _this.query.pageSize = res.data.pageSize;
                            _this.query.rowCount = res.data.rowCount;
                        }
                    });
                },
                loadeditor: function () {
                    var _this = this;
                    if (_this.editor.load) return;
                    hxt.post({
                        url: hxt.config.link + 'pc/wangEditorList',
                        data: { openId: _this.optor.openId },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('查询失败：' + res.errmsg);
                            _this.editor.list = res.data;
                            _this.editor.load = true;
                        }
                    });
                },
                pagerSizeChange: function (val) {
                    var _this = this;
                    _this.query.pageSize = val;
                    if (Math.ceil(_this.query.rowCount * 1.0000 / val) >= _this.query.pageIndex) _this.loadList();
                },
                pagerIndexChange: function (val) {
                    var _this = this;
                    _this.query.pageIndex = val;
                    _this.loadList();
                },
                openEdit: function (show, d) { //show 0：新增；1：修改；2：删除；
                    var _this = this;
                    _this.detail.obj.optType = show;
                    if (show == 0) {
                        _this.detail.obj.title = '';
                        _this.detail.obj.msg = '';
                        _this.detail.obj.editorId = '';
                        _this.detail.obj.beginTime = '';
                        _this.detail.obj.endTime = '';
                        _this.detail.obj.scrollable = 0;
                            _this.detail.obj.speed = 60;
                            _this.detail.obj.closeable = 0;
                        _this.detail.show = true;
                        return;
                    };
                    if (show == 1) {
                        _this.detail.obj.id = d.row.id;
                        _this.detail.obj.title = d.row.title;
                        _this.detail.obj.msg = d.row.msg;
                        _this.detail.obj.editorId = d.row.msg_key;
                        _this.detail.obj.beginTime = d.row.beginTime;
                        _this.detail.obj.endTime = d.row.endTime;
                        _this.detail.obj.scrollable = d.row.scrollable;
                        _this.detail.obj.speed = d.row.speed;
                        _this.detail.obj.closeable = d.row.closeable;
                        _this.detail.show = true;
                        return;
                    };
                    if (show == 2) {
                        hxt.confirm("确定删除此公告？", function () {
                            hxt.post({
                                url: hxt.config.link + 'pc/noticeSave',
                                data: {
                                    optType: 2,
                                    id: d.row.id,
                                    openId: _this.optor.openId
                                },
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                                    hxt.success('删除成功');
                                    _this.list.splice(d.rowIndex, 1);
                                }
                            });

                        });
                        return;
                    };
                },
                submit: function (e) {
                    var _this = this;
                    hxt.validateElForm(_this, "form", function () {
                        hxt.confirm("确定保存此公告？", function () {
                            hxt.post({
                                url: hxt.config.link + 'pc/noticeSave',
                                data: _this.detail.obj,
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('保存失败：' + res.errmsg);
                                    hxt.success('保存成功');
                                    _this.loadList();
                                    _this.detail.show = false;
                                }
                            });
                        });
                    });
                },
                toShare: function (url) {
                    window.open(url);
                }
            },
            components: {
                remoteScript: hxt.remoteScript(),
                remoteStyle: hxt.remoteStyle()
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    #title-container .el-input__inner {
        font-size: 30px;
        font-family: '宋体';
        font-weight: bold;
        color: black;
        border: none !important;
        outline: none;
        width: 100%;
    }
</style>